<!DOCTYPE HTML>
<html>

<head>

    <meta charset="utf-8">
    <title>笔记摘选-JavaScript篇</title>
    <link rel="shortcut icon" href="../../res/logo_main.png" />
    <link href="../public.css" type="text/css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            },
            corePlugins: {
                preflight: false,
            }
        }
    </script>
    <link href="md_style.css" type="text/css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>

<body> <!-- 通用导航栏 -->
    <nav id="main-nav">
        <!-- logo与标题部分 -->
        <div class="icon-title">
            <a href="../main_page/index.html"><img src="../../res/logo_main.png" height="35px" /></a>
            <a href="../main_page/index.html">
                <h1>个人学习成果展示</h1>
            </a>
        </div>

        <!-- 页面导航部分 -->
        <div class="nav-links">
            <div class="nav-link">
                <a href="../product_show_page/index.html">
                    <img src="../../res/product_icon.png" width="20px" />
                    <span>作品展示</span>
                </a>
                <div class="drop-menu">
                    <a href="../product_show_page/wpg_show.html">Windows进程守护工具</a>
                    <a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a>
                    <a href="../product_show_page/personal_blog_show.html">个人博客网站</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../notes_extract_page/index.html">
                    <img src="../../res/note_icon.png" width="20px" />
                    <span>笔记摘选</span>
                </a>
                <div class="drop-menu">
                    <a href="../notes_extract_page/html_note_page.html">HTML篇</a>
                    <a href="../notes_extract_page/css_note_page.html">CSS篇</a>
                    <a
                        href="../notes_extract_page/js_note_page.html">JavaScript篇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../info_links_page/index.html">
                    <img src="../../res/infomation_icon.png" width="20px" />
                    <span>资料链接</span>
                </a>
                <div class="drop-menu">
                    <a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a>
                    <a
                        href="../info_links_page/python_info_page.html">Python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../info_links_page/web_info_page.html">Web</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../js_lab_page/index.html">
                    <img src="../../res/lab_lcon.png" width="20px" />
                    <span>JS实验室</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../js_lab_page/sort_demo_page.html">排序演示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../js_lab_page/shape_draw_page.html">图形绘制</a>
                    <a href="../js_lab_page/address_list_page.html">通讯录演示</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../CV_show_page/index.html">
                    <img src="../../res/cv_icon.png" width="20px" />
                    <span>简历查看</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../CV_show_page/online_view_page.html">在线查看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../CV_show_page/index.html">简历下载</a>
                    <a href="../CV_show_page/index.html">联系方式</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../admin_entrance_page/index.html" target="_blank">
                    <img src="../../res/admin_icon.png" width="20px" />
                    <span>管理员入口</span>
                </a>
            </div>
        </div>
        <!-- 时间显示部分 -->
        <div class="time-show">
            <p id="current-date"></p>
            <p id="current-time"></p>
        </div>
        <!-- 注册＆登录部分 -->
        <div class="register-login">
            <button id="registerBtn">注册</button>
            <span>丨</span>
            <button id="loginBtn">登录</button>
        </div>
    </nav>

    <!-- 主页主体部分 -->
    <section class="main-body">
        <!--Banner图 -->
        <div class="banner-box">
            <img src="../../res/banner (12).png" alt="banner图">
            <h1 class="slogan" id="typewriter" style="min-width: 900px;">Web学习笔记（三）：JavaScript篇</h1>
        </div>
        <div class="md-block">
            <hr>
            <blockquote>
                <p>声明：本篇笔记部分摘自<a href="https://www.wenjingketang.com/bookinfo?book_id=9310">《Web前端技术 - 航空工业出版社》</a>，遵循<a
                        href="https://creativecommons.org/licenses/by/4.0/legalcode.zh-hans">CC BY 4.0协议</a>。<br>
                    存在由AI生成的小部分内容，仅供参考，请仔细甄别可能存在的错误。
                    本篇笔记转载自我的个人博客，<a
                        href="https://blog.morely.top/2025/06/07/Web%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9AJavaScript%E7%AF%87/"
                        target=“_blank”>点击跳转到原文地址</a>。
                </p>
            </blockquote>
            <hr>
            <h1 id="javascript">一、JavaScript概述</h1>
            <blockquote>
                <p>JavaScript 是一种高级、解释型编程语言，主要用于网页开发。它运行在浏览器中，能动态操作网页内容（如DOM）、处理用户交互、发送网络请求等。特点包括：</p>
                <ul>
                    <li><strong>动态性</strong>：无需编译，代码可直接运行。</li>
                    <li><strong>面向对象</strong>：支持基于原型的继承。</li>
                    <li><strong>事件驱动</strong>：通过事件监听响应用户操作。</li>
                    <li><strong>跨平台</strong>：几乎所有浏览器都支持。</li>
                </ul>
                <p>常与HTML、CSS结合使用，&#8203;现代框架如React、Vue使&#8203;其功能更强大。Node.js扩&#8203;展了其用途，可用于服务器端开发&#8203;。</p>
            </blockquote>
            <h1 id="_1">二、基本语法</h1>
            <h2 id="1">1.标识符</h2>
            <ul>
                <li>指开发者自定义的变量名、函数名、属性等名称。</li>
                <li>JavaScript中的标识符命名规则：<ul>
                        <li>由字母、下划线<code>_</code>、美元符号<code>$</code>和数字组成；</li>
                        <li>不允许以数字开头；</li>
                        <li>不允许使用关键字和保留字定义标识符（如<code>char</code>）。</li>
                    </ul>
                </li>
                <li>标识符的常用格式<ul>
                        <li>全大写命名法：<code>REDBAG</code>（常用于常量命名）</li>
                        <li>驼峰命名法：<code>redBag</code>（常用于函数命名）</li>
                        <li>帕斯卡命名法：<code>RedBag</code>（常用于类名和构造器命名）</li>
                        <li>下划线命名法：<code>red_bag</code>（常用于变量命名）</li>
                    </ul>
                </li>
            </ul>
            <h2 id="2">2.关键字和保留字</h2>
            <ul>
                <li>关键字，指JavaScript预先定义好的单词，被赋予了一定的意义。<ul>
                        <li>常见关键字：<code>break</code>、<code>case</code>、<code>catch</code>、<code>continue</code>、<code>debugger</code>、<code>default</code>、<code>delete</code>、<code>do</code>、<code>else</code>、<code>finally</code>、<code>for</code>、<code>funciton</code>、<code>if</code>、<code>in</code>、<code>instanceof</code>、<code>new</code>、<code>return</code>、<code>switch</code>、<code>this</code>、<code>throw</code>、<code>try</code>、<code>typeof</code>、<code>var</code>、<code>void</code>、<code>while</code>、<code>with</code>。
                        </li>
                    </ul>
                </li>
                <li>保留字，指将来可能使用的关键字，是为js发展空间预留的一些单词。<ul>
                        <li>常见保留字：<code>abstract</code>、<code>boolean</code>、<code>byte</code>、<code>char</code>、<code>class</code>、<code>const</code>、<code>double</code>、<code>enum</code>、<code>export</code>、<code>extends</code>、<code>final</code>、<code>float</code>、<code>goto</code>、<code>implements</code>、<code>import</code>、<code>int</code>、<code>interface</code>、<code>long</code>、<code>native</code>、<code>package</code>、<code>private</code>、<code>protected</code>、<code>public</code>、<code>short</code>、<code>static</code>、<code>super</code>、<code>synchronized</code>、<code>throws</code>、<code>transient</code>、<code>volatile</code>。
                        </li>
                    </ul>
                </li>
            </ul>
            <h2 id="3">3.变量的声明与赋值</h2>
            <ul>
                <li>与Python类似，JavaScript是一种<strong>弱类型语言</strong>；与C/C++不同，在声明变量时无需确定变量的数据类型，也可以给变量赋予不同类型的数据，JavaScript
                    会根据上下文自动进行类型转换。<sup id="fnref2:1"><a class="footnote-ref" href="#fn:1">1</a></sup></li>
            </ul>
            <pre class="codehilite"><code class="language-js">// 定义变量
var a = 1;
// 更改变量数据类型
a = &quot;小明&quot;;
</code></pre>

            <h2 id="4">4.输出方式(常用)</h2>
            <h3 id="1_1">① 页面输出</h3>
            <pre class="codehilite"><code class="language-js">document.write(&quot;&lt;div&gt;输出的内容&lt;/div&gt;&quot;);
</code></pre>

            <p><img alt="" src="imgs/20250520081716000.png"><br>
                - 直接将<strong>元素</strong>加载到页面上（加载的不是文字，而是一个<strong>标签</strong>）</p>
            <h3 id="2_1">② 控制台输出</h3>
            <pre class="codehilite"><code class="language-js">console.log(&quot;输出的内容&quot;);
</code></pre>

            <p><img alt="" src="imgs/20250520082256298.png"><br>
                - 在控制台输出内容，多用于打印相关变量的值，进行调试。</p>
            <h3 id="3_1">③ 弹窗输出</h3>
            <h4 id="_2">普通弹窗(适用于通知)</h4>
            <pre class="codehilite"><code class="language-js">alert(&quot;输出的内容&quot;);
</code></pre>

            <p><img alt="" src="imgs/20250523100337688.png"><br>
                - 多用于触发相关事件时，弹出相应的警告信息(如关闭标签时询问是否保存)。</p>
            <h4 id="_3">选择弹窗(多用于询问)</h4>
            <pre class="codehilite"><code class="language-js">var is_confirmed = confirm(&quot;提示信息&quot;);
</code></pre>

            <p><img alt="" src="imgs/20250520083211096.png"><br>
                - 需要确认某项操作，而不仅是通知用户时，使用次方法弹出一个包含"确定"与"取消"按钮的弹窗。<br>
                - 用户点击其中某个选项时，会返回<code>true</code>(确定)或<code>false</code>(取消)。</p>
            <h4 id="_4">输入弹窗(多用于获取信息)</h4>
            <pre class="codehilite"><code class="language-js">var input_info = prompt(&quot;提示信息&quot;);
</code></pre>

            <p><img alt="" src="imgs/20250520083410880.png"><br>
                - 用于提示用户输入一些信息，返回值为输入的内容。</p>
            <h2 id="5">5.在字符串中嵌入变量</h2>
            <h3 id="1-es6">① 模版字符串(<a href="https://www.bookstack.cn/read/es6-3rd/docs-intro.md">ES6</a>推荐使用)</h3>
            <pre class="codehilite"><code class="language-js">const name = 'Alice';
const age = 25;

const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); 
// 输出: My name is Alice and I'm 25 years old.
</code></pre>

            <h3 id="2_2">② 字符串拼接(传统方式)</h3>
            <pre class="codehilite"><code class="language-js">const name = 'Charlie';
const age = 35;

const message = 'My name is '.concat(name, ' and I\'m ', age, ' years old.'); // 可也以用“+”进行连接
console.log(message);
// 输出: My name is Charlie and I'm 35 years old.
</code></pre>

            <p>其中，<strong>模版字符串</strong>具有以下优点，一般是最佳的方案：<br>
                - 更简洁易读<br>
                - 支持多行字符串<br>
                - 可以直接嵌入表达式 <code>${expression}</code><br>
                - 自动处理类型转换</p>
            <h2 id="6javascript">6.JavaScript注释</h2>
            <p>js中的注释方式与C/C++类似,使用下面两种格式进行注释：</p>
            <pre class="codehilite"><code class="language-js">// 这是单行注释

/*
多行注释的第一行
多行注释的第二行
*/
</code></pre>

            <h1 id="javascript_1">三、JavaScript的引入与连接</h1>
            <h2 id="1_2">1.行内式</h2>
            <pre class="codehilite"><code class="language-html">&lt;!-- 单击按钮出现提示框 --&gt;
&lt;button onclick=&quot;alert('清除缓存成功！')&quot;&gt;清除浏览器缓存&lt;/button&gt;

&lt;!-- 单击标签出现提示框 --&gt;
&lt;a href=&quot;javascript: alert('弹窗内容')&quot;&gt;点击这里显示弹窗&lt;/a&gt;
</code></pre>

            <ul>
                <li>将js代码作为HTML标签的属性值使用。</li>
            </ul>
            <h2 id="2_3">2.内嵌式</h2>
            <pre class="codehilite"><code class="language-html">&lt;script&gt;
    &lt;!-- 这里写JavaScript代码 --&gt;
&lt;/script&gt;
</code></pre>

            <h2 id="3_2">3.外链式</h2>
            <pre class="codehilite"><code class="language-html">&lt;script src=&quot;js文件路径&quot; [async | defer]&gt;&lt;/script&gt;
</code></pre>

            <ul>
                <li>一般将外链js的标签写在<code>&lt;body&gt;</code>的末尾，方便浏览器优先加载网页内容，提高响应速度。</li>
                <li>async属性(可选)表示<strong>异步下载同步执行</strong>,即下载js文件时不阻塞HTML的解析和显示，js文件下载后立即执行。</li>
                <li>defer属性(可选)表示异步下载异步执行，即即下载js文件时不阻塞HTML的解析和显示，等HTML解析渲染完成后再执行文件。</li>
            </ul>
            <h1 id="_5">四、变量与数据类型</h1>
            <h2 id="1_3">1.变量的声明与赋值</h2>
            <ul>
                <li>与Python类似，JavaScript是一种<strong>弱类型语言</strong>；与C/C++不同，在声明变量时无需确定变量的数据类型，也可以给变量赋予不同类型的数据，JavaScript
                    会根据上下文自动进行类型转换。<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup></li>
            </ul>
            <pre class="codehilite"><code class="language-js">// 定义变量
var a = 1;
// 更改变量数据类型
a = &quot;小明&quot;;

// 声明一个常量
const PI = 3.1415926;
</code></pre>

            <ul>
                <li>ES6以前，声明变量时多用<code>var</code>关键字，格式为<code>var 变量名;</code></li>
                <li>ES6以后，增加了<code>let</code>关键字用于声明便联合，语法格式同样为<code>let 变量名;</code></li>
                <li>声明常量使用<code>const</code>关键字；常量一般用全大写命名，在程序运行中的值不变化。</li>
                <li>使用<code>var</code>与<code>let</code>的区别：<ul>
                        <li><code>let</code>支持块作用域(循环体、函数体等)，<code>var</code>不支持。</li>
                        <li>在同一个作用域中，<code>var</code>关键字可以重复声明一个变量，而<code>let</code>不可以。</li>
                    </ul>
                </li>
            </ul>
            <h2 id="es6">什么是ES6：</h2>
            <blockquote>
                <p>“ES6（ECMAScript）是由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标<br>
                    准化的脚本程序设计语言。JavaScript和Jscript语言可以理解为ECMAScript的实现和扩<br>
                    展。完整的 JavaScript由三部分组成，分别是ECMAScript、DOM、BOM。2015年6月，<br>
                    ECMAScript 6发布了正式版本。" ——《Web前端技术》P207</p>
            </blockquote>
            <h2 id="2_4">2.变量的作用域</h2>
            <ul>
                <li>全局变量：在所有函数之外声明的变量。</li>
                <li>局部变量：在函数体重声明的变量，或者函数的形参。</li>
                <li>块级变量：在代码块(循环体、if分支)中声明的变量，只在对应的块中有效。</li>
            </ul>
            <h2 id="3_3">3.数据类型</h2>
            <h3 id="1-undefined">① Undefined类型：未定义</h3>
            <ul>
                <li>是JavaScript特有的数据类型，仅有<code>Undefined</code>一种取值，表示未定义的值。</li>
                <li>定义一个变量但未赋值时，变量的值就是<code>undefined</code>。</li>
            </ul>
            <h3 id="2-null">② Null类型：空</h3>
            <ul>
                <li>也是JavaScript中特有的数据类型，仅有<code>null</code>一种取值，是一个空的对象指针。</li>
                <li>与<code>Undefined</code>类型相似，<code>null == undefined</code>。</li>
                <li>不同之处在于，<code>null</code>表示变量(或对象)不存在或无效，<code>undefined</code>表示变量没有被赋值。</li>
            </ul>
            <h3 id="3-boolean">③ Boolean类型：布尔值</h3>
            <ul>
                <li>有两个取值，<code>true</code>（真）与<code>false</code>（假）。</li>
                <li>使用<code>Boolean()</code>方法，可将<code>undefined</code>类型与<code>Null</code>类型的数据转换成<code>false</code>。
                </li>
            </ul>
            <h3 id="4-number">④ Number类型：数值</h3>
            <ul>
                <li>JavaScript中，数值不分整数与小数，所有的数值都属于<code>Number</code>类型。</li>
            </ul>
            <pre class="codehilite"><code class="language-js">var a = 10, b = -10;
var c = 9.85, d = 2.12E5; // d的值为2.12 * 100000
var e = 026, f = 0x34;    // 分别为8进制(以0开头)与16进制(以0x开头)
</code></pre>

            <ul>
                <li>使用<code>Number()</code>方法将其他类型的值转换成数值类型，转换规则如下表：</li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th>类型</th>
                        <th>Number()的值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Undefined</td>
                        <td>NaN</td>
                    </tr>
                    <tr>
                        <td>Null</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>false</td>
                        <td>0</td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li><code>NaN</code>的全称为"not a numble"，表示非数字，但本身属<code>Number</code>类型。</li>
                <li>在JavaScript中，将一个数除以0不会报错，而是得到一个<code>NaN</code>的值。</li>
                <li>对<code>NaN</code>进行任何计算操作，结果都是<code>NaN</code>。<code>NaN</code>不等于任何值，包括它本身。<ul>
                        <li>因此，判断一个值是否非数字时，不应使用<code>if (a == NaN)</code>，而是使用<code>isNaN(a)</code>方法。</li>
                    </ul>
                </li>
                <li>此外，在大数据方向，经常使用<code>Number(Null) = 0</code>的特性来将空值化0。</li>
            </ul>
            <h3 id="5-string">⑤ String类型：字符串</h3>
            <ul>
                <li>是由多个Unicode字符组成的<strong>字符序列</strong>，可由一对单引号（''）或双引号（""），但是需要正确配对。</li>
                <li>常用转义字符见下表：</li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th>字符</th>
                        <th>含义</th>
                        <th>字符</th>
                        <th>含义</th>
                        <th>字符</th>
                        <th>含义</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>\'</code></td>
                        <td>单引号</td>
                        <td><code>\b</code></td>
                        <td>退格</td>
                        <td><code>\r</code></td>
                        <td>回车</td>
                    </tr>
                    <tr>
                        <td><code>\"</code></td>
                        <td>双引号</td>
                        <td><code>\\</code></td>
                        <td>反斜杠</td>
                        <td><code>\f</code></td>
                        <td>换页</td>
                    </tr>
                    <tr>
                        <td><code>\n</code></td>
                        <td>换行</td>
                        <td><code>\t</code></td>
                        <td>Tab制表符</td>
                        <td><code>\e</code></td>
                        <td>Esc字符</td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li>使用<code>String()</code>方法将其他类型的值转换成字符串类型的值，转换规则如下表：</li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th>类型</th>
                        <th>String()的值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Undefined</td>
                        <td>'undefined'</td>
                    </tr>
                    <tr>
                        <td>Null</td>
                        <td>'null'</td>
                    </tr>
                    <tr>
                        <td>true</td>
                        <td>'true'</td>
                    </tr>
                    <tr>
                        <td>false</td>
                        <td>'false'</td>
                    </tr>
                    <tr>
                        <td># 五、运算符</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>## 1.算数运算符与逻辑运算符</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>- 与C/C++类似，JavaScript中同样有<code>+、-、*、/、%、++、--、+=、=</code>等算数运算符与赋值运算符，且用法相同，此处省略。</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>## 2.比较运算符</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>- <code>&lt;、&gt;、&lt;=、&gt;=</code>的用法与C/C++相同。</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>- 与C/C++不同的是，JavaSCript中除了使用<code>==、!=</code>进行比较，还支持<code>===、!===</code>的比较运算符。</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>- 前者在比较时会进行<strong>隐式类型转换</strong>，即将两者转换成相同的数据类型后再进行数值的比较。</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>- 后者不会进行隐式类型转换，且在比较数值以外，还会比较二者的数据类型是否相同。</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>## 3.条件运算符</td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <pre class="codehilite"><code class="language-js">max = a &gt; b ? a : b;
// 变量 = 表达式 ？ 为真时的返回值 ： 为假时的返回值；
</code></pre>

            <ul>
                <li>即C语言中的<strong>问号表达式</strong>，用法相同。</li>
            </ul>
            <h2 id="4_1">4.逻辑运算符</h2>
            <ul>
                <li>分别用<code>&amp;&amp;</code>、<code>||</code>与<code>!</code>表示逻辑与、逻辑或和逻辑非。</li>
            </ul>
            <h1 id="_6">六、流程控制语句</h1>
            <p>JavaScript的流程控制&#8203;语句语法与C/C++基本相同，&#8203;此处只给出语法实例。</p>
            <h2 id="1_4">1.选择语句</h2>
            <h3 id="1-if">① if语句</h3>
            <pre class="codehilite"><code class="language-js">if (条件1) {
    操作1
} else if (条件2) {
    操作2
} else {
    操作3
}
</code></pre>

            <h3 id="2-switch">② switch语句</h3>
            <pre class="codehilite"><code class="language-js">switch (变量) {
    case 取值1:
        操作1
        break;
    case 取值2:
        操作2
        break;
    default:
        操作3
        break;
}
</code></pre>

            <ul>
                <li>注意：此语句使用<code>===</code>进行匹配，即需要确保<code>case</code>中的数据类型与<code>switch</code>的相同，例如：<ul>
                        <li><code>switch(字符型变量) {case "1"…… case "2"……}</code></li>
                        <li><code>switch(Number(字符型变量)) {case 1…… case 2……}</code></li>
                    </ul>
                </li>
            </ul>
            <h2 id="2_5">2.循环语句</h2>
            <h3 id="1-for">① for语句</h3>
            <pre class="codehilite"><code class="language-js">// C/C++风格：
for(var i = 0; i &lt; n; i++) {
    循环体
}

// Python风格：
for (var name in names) {    // 可以遍历数组的元素和对象的属性
    循环体
}
// 例：遍历输出窗口(window对象)上的所有属性：
for (var name in window) {
    console.log(name);
}
</code></pre>

            <ul>
                <li>多用于明确循环次数的场景</li>
                <li><code>for(;;) {}</code>的写法构成死循环，若无跳出逻辑会导致后续脚本无法执行。</li>
            </ul>
            <h3 id="2-while">② while语句</h3>
            <pre class="codehilite"><code class="language-js">while(循环条件) {
    循环体
}
</code></pre>

            <ul>
                <li>多用于不明确循环次数的场景，或需要根据循环中的状态灵活决定是否继续循环的场景。</li>
            </ul>
            <h3 id="3-do-while">③ do-while语句</h3>
            <pre class="codehilite"><code class="language-js">do {
    循环体
} while(循环条件)
</code></pre>

            <ul>
                <li><code>while</code>循环可能一次都不进行，但<code>do-while</code>语句至少执行一次。</li>
            </ul>
            <h2 id="3_4">3.跳转语句</h2>
            <h3 id="1-break">① break语句</h3>
            <p>用于跳出所在的一层循环</p>
            <h3 id="2-continue">② continue语句</h3>
            <p>用于终止此轮循环，立即跳转到判断是否进行下一轮循环</p>
            <h1 id="_7">七、函数</h1>
            <h2 id="1_5">1. 函数的定义与调用</h2>
            <h3 id="1_6">① 函数声明</h3>
            <pre class="codehilite"><code class="language-js">// 函数声明
function 函数名(形参列表) {     // 无需指明变量类型，直接写形参名，如(para1, para2)
    函数体
    return 返回值;
}

// 使用
console.log(函数名(实参列表));
</code></pre>

            <ul>
                <li>这种写法会被提升(hoisting)，即可以在定义前调用</li>
            </ul>
            <h3 id="2_6">② 函数表达式</h3>
            <pre class="codehilite"><code class="language-js">// 函数表达式
const 函数名 = function(形参列表) {
    函数体
    return 返回值;
};

// 另一种写法:直接使用function语句进行定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}

// 使用
console.log(函数名(实参列表));
</code></pre>

            <ul>
                <li>这种写法不会被提升</li>
            </ul>
            <h3 id="3_5">③ 函数的嵌套与递归</h3>
            <pre class="codehilite"><code class="language-js">// 嵌套：在函数中定义另一个函数
function putOut() {
    function putIn(x, y) {
        alert(x + y);
    }
    return putIn(1, 2);
}

// 递归：在函数体中调用函数本身
function factorial(n) {
    if (n &lt;= 1) {
        return 1;
    }
    return n * factorial(n - 1);
}
</code></pre>

            <h1 id="_8">八、对象</h1>
            <blockquote>
                <p>在实际编程中，不仅存在来自客观&#8203;世界的具体对象，还存在着一些为&#8203;了解决问题引入的，较为抽象的对&#8203;象。对象可以理解为属性和方法的&#8203;集合，用户通过操作方法，访问或&#8203;设置对象的属性，从而实现不同的&#8203;功能。
                </p>
            </blockquote>
            <h2 id="1_7">1.对象的创建</h2>
            <h3 id="1_8">① 直接创建对象</h3>
            <pre class="codehilite"><code class="language-js">var 对象名 = {
    属性: 值;

    方法: function(参数列表) {
        方法体
    }
}
</code></pre>

            <ul>
                <li>这种写法注意不要把方法的定义写成<code>方法(): function {}</code></li>
            </ul>
            <h3 id="2_7">② 通过自定义构造函数创建对象</h3>
            <pre class="codehilite"><code class="language-js">function 对象名 (参数列表) {
    this.属性 = 值;

    this.方法 = function(参数列表) {
        方法体
    }
}

// 调用构造函数定义对象：
var 对象 = new 对象名(参数列表);
</code></pre>

            <ul>
                <li>特征：使用<code>this</code>标识出内部的函数为<strong>构造函数</strong>
                    <ul>
                        <li>它们的参数多用于创建和初始化对象，而不是用于计算</li>
                    </ul>
                </li>
            </ul>
            <h3 id="3-object">③ 通过<code>Object对象</code>创建对象</h3>
            <ul>
                <li><code>object对象</code>是JavaScript的内部对象，通过这样的对象来创建对象不需要定义构造函数，并且可以随时对其添加属性。</li>
            </ul>
            <pre class="codehilite"><code class="language-js">var 对象名 = new Object(参数列表)

// 例：通过Object对象定义一个user对象：
var user = new object();            // 先定义一个空对象
user.name = &quot;张三&quot;;                  // 添加属性
user.age = 20;
user.show = function() {            // 添加方法
    document.write(&quot;姓名：&quot; + user.name + &quot;&lt;br/&gt;&quot;)
    document.write(&quot;年龄：&quot; + user.age + &quot;&lt;br/&gt;&quot;)
}
</code></pre>

            <h2 id="2_8">2.对象的访问</h2>
            <h3 id="1-forin">① for……in语句</h3>
            <pre class="codehilite"><code class="language-js">for (变量 in 对象) {
    循环体
}
</code></pre>

            <ul>
                <li>变量用于存储某个对象的所有属性名，使用此语句输出对象的属性时，需要使用数组(<code>对象["属性"]</code>)的方式，而不是<code>对象.属性</code>的方式，如下所示：</li>
            </ul>
            <pre class="codehilite"><code class="language-js">for (var a in user) {
    console.log(user[a]);     // 不能写成 user.a !
}
</code></pre>

            <h3 id="2-with">② with语句</h3>
            <pre class="codehilite"><code class="language-js">with (对象名) {
    语句
}

// 这种写法可以省略多次书写对象名和句点，如下所示：
console.log(user.name);
console.log(user.age);
// 等价于如下写法：
with (user) {
    console.log(name);
    console.log(age);
}
</code></pre>

            <blockquote>
                <p>未完待续，正在持续更新中…</p>
            </blockquote>

            <h1 id="_9">九、数组</h1>
            <h1 id="dom">十、DOM</h1>
            <h1 id="bom">十一、BOM</h1>
            <h1 id="_10">十二、事件</h1>
            <hr>
            <h1 id="_11">参考资料</h1>
            <div class="footnote">
                <hr>
                <ol>
                    <li id="fn:1">
                        <p>王铁柱6.为什么说js是弱类型语言，它的优缺点分别是什么？[EB/OL].(2024-11-28)[2025-05-13].
                            https://www.cnblogs.com/ai888/p/18573400.&#160;<a class="footnote-backref" href="#fnref:1"
                                title="Jump back to footnote 1 in the text">&#8617;</a><a class="footnote-backref"
                                href="#fnref2:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
                    </li>
                </ol>
            </div>
        </div>
    </section>

    <!-- 通用页脚 -->
    <footer class="main-footer">
        <!-- 页脚链接列表 -->
        <div class="footer-lists">
            <div class="footer-list">
                <dl>
                    <dt><a href="../product_show_page/index.html">作品展示</a></dt>
                    <dd><a href="../product_show_page/wpg_show.html">Windows进程守护工具</a></dd>
                    <dd><a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a></dd>
                    <dd><a href="../product_show_page/personal_blog_show.html">个人博客网站</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../notes_extract_page/index.html">笔记摘选</a></dt>
                    <dd><a href="../notes_extract_page/html_note_page.html">HTML篇</a></dd>
                    <dd><a href="../notes_extract_page/css_note_page.html">CSS篇</a></dd>
                    <dd><a href="../notes_extract_page/js_note_page.html">JavaScript篇</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../info_links_page/index.html">资料链接</a></dt>
                    <dd><a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a></dd>
                    <dd><a href="../info_links_page/python_info_page.html">Python</a></dd>
                    <dd><a href="../info_links_page/web_info_page.html">Web</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../js_lab_page/index.html">JS实验室</a></dt>
                    <dd><a href="../js_lab_page/sort_demo_page.html">排序演示</a></dd>
                    <dd><a href="../js_lab_page/shape_draw_page.html">图形绘制</a></dd>
                    <dd><a href="../js_lab_page/address_list_page.html">通讯录演示</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../CV_show_page/index.html">简历查看</a></dt>
                    <dd><a href="../CV_show_page/online_view_page.html">在线查看</a></dd>
                    <dd><a href="../CV_show_page/index.html">简历下载</a></dd>
                    <dd><a href="../CV_show_page/index.html">联系方式</a></dd>
                </dl>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="footer-separation"></div>
        <!-- 其他信息 -->
        <div class="other-info">
            <p style="margin-top: 0;">我的邮箱：h2892197119@foxmail.com</p>
            <span>友情链接：</span>
            <a href="https://blog.morely.top" class="friend-link" target="_blank"><img src="../../res/logo_main.png"
                    width="15px" style="margin:0px 5px 0px 5px;">陌离的个人博客</a>
            <p>本网站仅用于学习展示，部分素材取自网络；<br />如有侵权请联系本人进行删除。</p>
        </div>
    </footer>
    <!-- 版权信息 -->
    <div class="copyright-info">
        Copyright &copy;2025 个人学习成果展示网站
    </div>

    <script type="text/javascript" src="../login_register_window.js"></script>
    <script type="text/javascript" src="../public.js"></script>
</body>

</html>